<!DOCTYPE html>
<html lang="en" manifest="index.appcache">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="basic.css">
    <title>Scroll</title>
</head>
<body>
    <section>
        <img src="bg.jpg" alt="" id="bg" >
        <img src="moon.png" alt="" id="moon" >
        <img src="mountain.png" alt="" id="mountain" >
        <img src="road.png" alt="" id="road" >
        <h2 id="text">滚动视差效果</h2>
    </section>
    <h3>Title</h3>
    <article>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, maxime velit? Sed, nihil tempore quibusdam molestias incidunt saepe. Rem debitis dolor sequi possimus eum atque sapiente numquam tenetur iusto. Vel, aspernatur saepe nihil eveniet repudiandae asperiores doloribus quae, et fugiat deserunt aliquid illo dolor unde dolorum corrupti ducimus facilis ab ea temporibus nulla? Distinctio repellendus aspernatur voluptatem. Enim culpa non, dolores quidem quae delectus quo saepe minus? Facilis quia debitis aut blanditiis dignissimos vero voluptate non porro! Odit enim, iure quia vero officiis magnam in similique doloribus quo blanditiis aperiam iste neque optio ducimus reprehenderit at debitis? Dicta tempore quasi quia! Quas, quod obcaecati magni maxime itaque, atque laborum quo dolorum ea inventore doloremque, et omnis nostrum corporis quam maiores temporibus quibusdam mollitia repudiandae voluptatum blanditiis a voluptatem. Culpa dolore nisi doloribus! Laboriosam inventore ut ullam doloremque, numquam, enim a veritatis ducimus nobis consequuntur id voluptatem eligendi sint error quas sit unde sunt exercitationem hic quod ex commodi soluta dolorum. Fugiat nihil libero soluta saepe laboriosam alias veritatis voluptates! Nisi quibusdam tempora enim reprehenderit in. Nemo ea commodi laudantium fuga esse laborum reprehenderit corporis maiores placeat quidem voluptas distinctio impedit amet nihil facilis harum sapiente quae, nostrum provident inventore?
    </article>
</body>
<script>
    let bg =document.getElementById('bg'),
    moon =document.getElementById('moon'),
    mountain =document.getElementById('mountain'),
    road =document.getElementById('road'),
    text =document.getElementById('text')

    window.addEventListener('scroll',function () {
        var value = window.scrollY
        bg.style.transform=`translateY(${value*0.5}px)`
        moon.style.transform= `translateX(${-value*0.5}px)`
         
        //moon.style.left= -value*0.5+'px'
        mountain.style.transform= `translateY(${-value*0.15}px)`
        road.style.transform= `translateY(${value*0.15}px)`
        text.style.transform= `translateY(${value*1}px)`
    })
</script>
</html>